<template>
  <div class="box">
    <li>
      <div>
        <router-link
          class="fa fa-home"
          exact
          to="/"
          active-class="nav"
          tag="i"
        ></router-link>
        <p>首页</p>
      </div>
    </li>

    <li>
      <div>
        <router-link
          class="fa fa-th-large"
          exact
          to="/classift"
          active-class="nav"
          tag="i"
        ></router-link>
        <p>分类</p>
      </div>
    </li>

    <li>
      <div>
        <router-link
          class="fa fa-envira"
          exact
          to="/discover"
          active-class="nav"
          tag="i"
        ></router-link>
        <p>发现</p>
      </div>
    </li>

    <li>
      <div>
        <router-link
          class="fa fa-shopping-cart"
          exact
          to="/shopping"
          active-class="nav"
          tag="i"
        ></router-link>
        <p>购物车</p>
      </div>
    </li>

    <li @click="login()">
      <div>
        <router-link
          class="fa fa-user-circle-o"
          exact
          to="/center"
          active-class="nav"
          tag="i"
        ></router-link>
        <p>我的</p>
      </div>
    </li>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {}
  },

  methods: {
    login () {
      const token = localStorage.getItem('token')
      this.request
        .post('/api/user/tokenDecoder', {
          token
        })
        .then((res) => {
          console.log(res)
          if (res.status != 200) {
            console.log(111111111111)
            this.$router.push('/center/login')
          }
        })

      // p.then((res) => {
      //   // var session = sessionStorage.setItem("user")
      //   console.log(res.data)

      //   if (res.data.status) {
      //     console.log(11111)
      //   } else {
      //     this.$router.push('/center/login')
      //   }
      // })
    }
  }
}
</script>

<style scoped>
.box {
  width: 23.4375rem;
  height: 3.5rem;
  background-color: #f63d3b;
  position: fixed;
  bottom: 0;
}
.box li {
  width: 20%;
  height: 3.5rem;
  text-align: center;
  float: left;
  position: relative;
}
.box p {
  font-size: 12px;
  color: white;
}
i {
  font-size: 20px;
  color: rgb(247, 229, 222);
}
.box li div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.nav {
  color: rgb(89, 175, 255);
}
</style>
